<template>
  <div id="container"></div>
</template>
<script>
// "echarts-liquidfill": "^2.0.6",
import 'echarts-liquidfill'
export default {
  mounted() {
    const chart = this.$echarts.init(document.getElementById('container'))
    chart.setOption({
      series: [
        {
          type: 'liquidFill',
          // waveAnimation: false, // 禁止波浪
          // animationDuration: 0, // 持续时间
          // animationDurationUpdate: 0, // 重绘持续时间
          // amplitude:0,// 波浪的曲率（0是直线）
          color: ['red', 'blue', 'yellow'],
          data: [
            0.68,
            0.4,
            // 单独配置
            {
              value: 0.2,
              direction: 'left', // 波浪方向
              itemStyle: {
                opacity: 0.9
              },
              // 选中时
              emphasis: {
                itemStyle: {
                  opacity: 1
                }
              }
            }
          ],
          itemStyle: {
            opacity: 0.6
          },
          // 选中时
          emphasis: {
            itemStyle: {
              opacity: 0.8
            }
          },
          backgroundStyle: {
            color: 'purple', // 背景色
            borderWidth: 4, // 内边框宽度
            borderColor: '#333'
          },
          outline: {
            // show: false // 隐藏外层
            borderDistance: 20, // 边框距离
            itemStyle: {
              // opacity: 0.6
              borderWidth: 5, // 边框宽度
              borderColor: 'pink',
              shadowBlur: 'none'
            }
          },
          shape: 'diamond' // 形状 默认圆形
        }
      ]
    })
  }
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 100%;
}
</style>
